import React from 'react';
import { Link } from 'react-router';
import { connect } from 'react-redux'
import _ from 'lodash'

import { Table, Icon, Tag, Form, Select, Button, message, Modal, Input, Popover} from 'antd';
const Option = Select.Option,
    FormItem = Form.Item;
import { changePage, mPacs, _validate, _maskRender } from '../../store/actions';
import SearchInput from '../../components/search-input';

const tempUserData = [
        {
            username:"zhangsan",
            user_id:'user_id_01',
            account_id:'account_id_01',
            name:'张三',
            gender:'M',
            idcard:'410103199912125469',
            reg_date:'2016-05-05',
            last_modified_date:'2016-05-05',
            nickname:'张用户',
            mobile: '13245678965',
            status:1
        },{
            username:"lisi123",
            user_id:'user_id_02',
            account_id:'account_id_02',
            name:'李四',
            gender:'M',
            idcard:'410103199912125469',
            reg_date:'2016-05-05',
            last_modified_date:'2016-05-05',
            nickname:'李用户',
            mobile: '13245678965',
            status:0
        },{
            username:"wangwu",
            user_id:'user_id_03',
            account_id:'account_id_03',
            name:'王五',
            gender:'F',
            idcard:'410103199912125469',
            reg_date:'2016-05-05',
            last_modified_date:'2016-05-05',
            nickname:'王昵称',
            mobile: '13245678965',
            status:0
        }
    ];

class _AdminList extends React.Component{
    constructor(props){
        super(props);
        this.state ={
        };
        this.onSelectChange = this.onSelectChange.bind(this);
        this.reFetch = this.reFetch.bind(this);
        this.switchHandler = this.switchHandler.bind(this);
        this.goEdit = this.goEdit.bind(this);
        this.switchStatus = this.switchStatus.bind(this)
    }
    componentWillMount(){
        /* 获取医生列表 */
    }
    componentWillReceiveProps(nextProp){
        this.setState({
            images: nextProp.items,
            isFetch:nextProp.isFetch,
            imagesLen:nextProp.items && nextProp.items.length
        })
    }
    onSelectChange(selectedRowKeys) {
        this.setState({ selectedRowKeys });
    }
    componentDidMount(){
        _maskRender()
    }
    reFetch(v){
        /* 重新获取数据 */
    }
    switchStatus(type){
        if(type === 'on'){
            /* 启用医生 */
        }else if(type === 'off'){
            /* 停用医生 */
        }
    }
    switchHandler(e){
        e.preventDefault();
        const _t = e.target.dataset;
        const modalOpts = {
            title: _t.type == 'on'?'启用管理员':'停用管理员',
            content: _t.type == 'on'?`确认要启用管理员 ${_t.name} 吗？`:`确认要停用管理员 ${_t.name} 吗？`,
            okText: _t.type == 'on'?'启用':'停用',
            onOk:this.switchStatus(_t.type)
        };
        Modal.confirm({...modalOpts})
    }
    static contextTypes = {
        router: React.PropTypes.object
    };
    goEdit(e){
        e.preventDefault();
        const _t = e.target.dataset;
        this.props.dispatch(changePage('user-edit'));
        this.context.router.push({pathname:`/user-edit/${_t.id}`})
    }
    addAdmin(e){
        e.preventDefault();
        this.context.router.push({pathname:`/admin-add`});
        this.props.dispatch(changePage('admin-add'));
    }
    render(){
        const _this = this;
        const columns = [{
            title: '用户名',
            dataIndex: 'username'
        },{
            title: '姓名',
            dataIndex: 'name'
        }, {
            title: '性别',
            dataIndex: 'gender',
            render(text){
                return text === 'M' ? '男' : '女'
            }
        }, {
            title: '身份证号',
            dataIndex: 'idcard'
        }, {
            title: '手机号',
            dataIndex: 'mobile'
        }, {
            title: '状态',
            dataIndex: 'status',
            render(text){
                switch (text){
                    case 0:
                        return <span style={{color:'red'}}>已停用</span>;
                    case 1:
                        return <span style={{color:'green'}}>正常</span>;
                    default:
                        return <span>未知</span>;
                }
            }
        }, {
            title: '操作',
            render: (text, record) => {
                switch(record.status){
                    case 0:
                        return (
                            <div>
                                <a href="#" data-type='on' data-name={`${record.name}`} onClick={_this.switchHandler} id={`${record.id}`}>启用</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`} onClick={this.goEdit}>编辑</a>
                            </div>
                        );
                    case 1:
                        return (
                            <div>
                                <a href="#" data-type='off' data-name={`${record.name}`} onClick={_this.switchHandler} id={`${record.id}`}>停用</a>
                                <span className="ant-divider"> </span>
                                <a href="#" data-id={`${record.id}`} onClick={this.goEdit}>编辑</a>
                            </div>
                        );
                    default:
                        return '--';
                }
            }
        }];

        const dataLen = this.state.imagesLen;
        const pagination = {
            total: dataLen,
            showSizeChanger: true,
            onShowSizeChange(current, pageSize) {},
            onChange(current) {}
        };
        //const { loading, selectedRowKeys } = this.state;

        const rowSelection = {};
        return (
            <div id="images">
                <div style={{overflow: 'hidden', marginBottom: '10px', padding: '10px 0'}}>
                    <div style={{float:'left'}}>
                        <Button type="primary" size="large" icon="plus" onClick={this.addAdmin.bind(this)}>新增管理员</Button>
                    </div>
                    <div style={{float:'right'}}>
                        <SearchInput style={{ width: 200 }} placeholder='请输入关键字查询' />
                    </div>
                </div>
                <Table rowSelection={rowSelection} columns={columns} dataSource={tempUserData} pagination={pagination} />
                <div id="_mask"></div>
            </div>
        )
    }
}
_AdminList = Form.create()(_AdminList);
let AdminList ;
export default AdminList = connect((state)=>{
    const {user} = state.rootReducer;
    return {user}
})(_AdminList)